<template>
	<div class="border flex flex-v" :style="{ height: cardHeight }">
		<div class="border-hd">
			<slot name="title">{{ cardTitle }}</slot>
		</div>
		<div class="flex-1 border-bd flex flex-v">
			<div class="border-bd-wrap"><slot></slot></div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		cardTitle: {
			type: String,
			default: ''
		},
		cardHeight: {
			type: [String, Number],
			default: '100%'
		}
	}
};
</script>

<style scoped lang="less">
.border {
	width: 100%;
	max-width: 100%;
	height: 2.3rem;
	position: relative;

	.border-hd {
		background: url(/img/dashboard/bank/kuang-shanglong.png) no-repeat;
		background-size: cover;
		color: #fff;
		font-size: 0.18rem;
		letter-spacing: 0.05rem;
		padding-left: 0.05rem;
		line-height: 0.28rem;
		height: 0.3rem;
		text-align: center;
	}
	.border-bd {
		position: relative;
		margin-bottom: 0.1rem;
		&:before {
			content: '';
			display: block;
			background: url(/img/dashboard/bank/kuang-zhongjianlong.png) repeat-y;
			background-size: 100% auto;
			flex: 1;
		}
		&:after {
			content: '';
			display: block;
			background: url(/img/dashboard/bank/kuang-xialong.png) no-repeat;
			background-size: 100% auto;
			height: 0.45rem;
			width: 100%;
			z-index: 1;
		}
	}
	.border-bd-wrap {
		position: absolute;
		top: 0;
		bottom: 0.1rem;
		left: 0;
		right: 0;
	}
}
</style>
